<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡&&动画</title>
    <style>
        /*显示和隐藏效果的过渡*/
        .xxx-enter-active, .xxx-leave-active{
            transition: opacity 1s;
        }
        /*隐藏时的样式*/
        .xxx-enter, .xxx-leave-to{
            opacity: 0;
        }


        /*test2显示的过渡效果*/
        .move-enter-active{
            transition: all 1s;
        }
        /*test2隐藏的过渡效果*/
        .move-leave-active{
            transition: all 2s;
        }

        .move-enter, .move-leave-to{
            opacity: 0;
            transform: translateX(20px);
        }
    </style>
</head>
<body>
<!--
    1/vue动画的理解
        造作css的transition或animation
        vue会给目标元素添加、移除特定的class
    2/基本过渡动画的编码
        1)在目标元素外包裹<transition name='xxx>
        2)定义class样式
            1>指定过渡样式：transition
            2>指定隐藏时的样式：opacity/其他
    3/过渡的类名
        xxx-enter-active: 指定显示的transition
        xxx-leave-active: 指定隐藏的transition
        xxx-enter: 指定隐藏时的样式
-->
<div id="test1">
    <button @click="isShow = !isShow">toggle</button>
    <transition name="xxx">
        <p v-show="isShow">hello</p>
    </transition>

</div>

<div id="test2">
    <button @click="isShow = !isShow">toggle</button>
    <transition name="move" >
        <p v-show="isShow">hello</p>
    </transition>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test1',
        data:{
            isShow:true,
        }
    })

    const vm2 = new Vue({
        el:'#test2',
        data:{
            isShow:true,
        }
    })
</script>
</body>
</html>
